<template>
	<view>
		<!-- 顶部滚动 tabs -->
		<swiperTabHead :tabBars="tabBars" :tabIndex="tabIndex" @tabTap="tabTap"></swiperTabHead>
		
		<!-- 列表 -->
		<view class="uni-tab-bar">
			<swiper
				class="swiper-box" 
				:style="{ height: swiperHeight+'px' }"
				:current="tabIndex"
				@change="tabChange"
			>
				<swiper-item v-for="(items, indexs) in newsList" :key="indexs">
					<scroll-view scroll-y class="list" @scrolltolower="loadMore(indexs)">
						<template v-if="items.list.length > 0">
							<!-- 图文列表 -->
							<block v-for="(item, index) in items.list" :key="index">
								<view class="topic-view">
									<topicList :item="item" :index="index"></topicList>
								</view>
							</block>
							<!-- 上拉加载更多 -->
							<loadMore :loadMoreText="items.loadMoreText"></loadMore>
						</template>
						<!-- 没有数据显示：无数据图片 -->
						<template v-else>
							<noThing></noThing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import topicList from '../../components/news/topic-list.vue'
	import swiperTabHead from '../../components/index/swiper-tab-head.vue'
	import loadMore from '../../components/common/load-more.vue'
	import noThing from '../../components/common/no-thing.vue'
	export default {
		components:{
			topicList, // 列表
			swiperTabHead, // 顶部 tab 
			loadMore,
			noThing
		},
		data() {
			return {
				tabIndex: 0,
				swiperHeight: 500, // swiper 的高度
				tabBars: [
					{
				    name: '关注',
				    id: 'guanzhu'
					}, {
						name: '推荐',
						id: 'tuijian'
					}, {
						name: '体育',
						id: 'tiyu'
					}, {
						name: '热点',
						id: 'redian'
					}, {
						name: '财经',
						id: 'caijing'
					}, {
						name: '娱乐',
						id: 'yule'
					}
				],
				newsList: [
					{
						loadMoreText: '上拉加载更多',
						list: [
							{
								titlepic: '../../static/demo/topicpic/13.jpeg',
								title: '话题名称',
								desc: '我的话题描述',
								totalNum: 50,
								todayNum: 20
							},
							{
								titlepic: '../../static/demo/topicpic/13.jpeg',
								title: '话题名称',
								desc: '我的话题描述',
								totalNum: 50,
								todayNum: 20
							},
							{
								titlepic: '../../static/demo/topicpic/13.jpeg',
								title: '话题名称',
								desc: '我的话题描述',
								totalNum: 50,
								todayNum: 20
							},
							{
								titlepic: '../../static/demo/topicpic/13.jpeg',
								title: '话题名称',
								desc: '我的话题描述',
								totalNum: 50,
								todayNum: 20
							},
							{
								titlepic: '../../static/demo/topicpic/13.jpeg',
								title: '话题名称',
								desc: '我的话题描述',
								totalNum: 50,
								todayNum: 20
							},
							{
								titlepic: '../../static/demo/topicpic/13.jpeg',
								title: '话题名称',
								desc: '我的话题描述',
								totalNum: 50,
								todayNum: 20
							}
						]
					},
					{
						loadMoreText: '上拉加载更多',
						list: [
							
						]
					},
					{
						loadMoreText: '上拉加载更多',
						list: [
							
						]
					},
					{
						loadMoreText: '上拉加载更多',
						list: [
							
						]
					},
					{
						loadMoreText: '上拉加载更多',
						list: [
							
						]
					},
					{
						loadMoreText: '上拉加载更多',
						list: [
							
						]
					}
				]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res => {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperHeight = height
					console.log(height)
				})
			})
		},
		// 监听搜索框的点击事件
		onNavigationBarSearchInputClicked() {
			console.log('点击搜索')
			uni.navigateTo({
				url: '../search/search'
			})
		},
		methods: {
			// 上拉刷新
			loadMore(index) {
				console.log(index)
				/* if(this.newsList[index].loadMoreText != '上拉加载更多') {
					return
				} */
				// this.newsList[index].loadMoreText = '上拉加载更多'
				// this.newsList[index].loadMoreText = '加载中...'
				// this.newsList[index].loadMoreText = '没有更多数据'
				
				if(this.newsList[index].loadMoreText!="上拉加载更多"){ return; }
								// 修改状态
								this.newsList[index].loadMoreText="加载中...";
								// 获取数据
								setTimeout(()=> {
									//获取完成
									let obj={
										titlepic: '../../static/demo/topicpic/13.jpeg',
										title: '话题名称',
										desc: '我的话题描述',
										totalNum: 50,
										todayNum: 20
									};
									this.newsList[index].list.push(obj);
									this.newsList[index].loadMoreText="上拉加载更多";
								}, 1000);
								// this.newslist[index].loadMoreText="没有更多数据了";
			},
			// 顶部tab选项卡切换事件
			tabChange(e) {
				// console.log(e.detail)
				this.tabIndex = e.detail.current
			},
			// 滑动事件
			tabTap(index){
				this.tabIndex = index
			}
		}
	}
</script>
<style lang="scss">
	.list{
		height: 100%;
	}
	.topic-view{
		padding: 0 20upx;
	}

</style>